$bgcolor: #eee;
@mixin cmp {
    margin: 0;
    padding: 0;
}

body {
    @include cmp;
    > .container {
        min-width: 500px;
        width: 70%;
        margin: 10px auto;
        padding: 0 0 0 150px;
        border: 1px solid red;
        border-radius: 8px;
        background-color: $bgcolor;

        overflow: hidden;

        $boxheight: 500px;
        @mixin holy-grail {
            float: left;
            height: $boxheight;
        }

        > .title {
            height: 30px;
            line-height: 30px;
            > span {
                margin-left: -100px;
            }
        }
        > .main {
            @include holy-grail;
            width: 100%;
            background-color: mix($bgcolor,#fff);

            $percent1: 0.10;
            $percent3: 0.05;
            $percent2: 1 - $percent1 - $percent3;


            > .pic-upload {
                margin-left: 10px;
                height: percentage($percent1);
                line-height: $boxheight * $percent1;
            }
            > .pic {
                height: percentage($percent2);
                display: none;
            }
            > .selected {
                display: block;
                > div.img {
                    position: relative;
                    > img {
                        width: 160px;
                        height: 120px;
                        margin: 10px;
                    }
                    > div.delete {
                        bottom: 27px;
                        right: 19px;
                        position: absolute;
                        z-index: 999;
                        width: 3px;
                        height: 3px;
                    }
                }
            }
            > nav { 
                background-color: white;
                height: percentage($percent3);
                line-height: $boxheight * $percent3;
                > span {
                    margin-right: 5px;
                    &:nth-child(1) {
                        margin-left: 10px;
                    }
                    &:hover {
                        cursor: pointer;
                        background-color: #ccc;
                        border-radius: 4px;
                    }
                }
            }
        }
        > .left {
            @include holy-grail;
            width: 150px;
            margin-left: -100%;
            position: relative;
            left: -150px;

            background-color: mix($bgcolor, #bbb);
            > .pic-collection {
                height: 30px;
                margin-bottom: 10px;
                padding-left: 10px;
                line-height: 30px;
                border: 1px solid #ddd;
                
                &:nth-child(1) {
                    margin-top: 10px;
                }
                > a {
                    text-decoration: none;
                }
                > button {
                    float: right;
                    position: relative;
                    right: 10px;
                    top: 5px;
                }
            }
        }
    }
}
